<template>
	<view class="page">
		<view class="flex0">
			<u-navbar :fixed='false' bgColor="transparent" @leftClick="navBack" title="心理测评">
				<view slot="center" class="navTitle">
					心理测评
				</view>
			</u-navbar>
			<view class="infoHead" v-if="info.name">
				<view class="date">
					<view class="d pd30">
						<text>截止日期 {{info.endTimeFormat}}</text>
						<view class="bg">
							<image src="https://bjsx.gzwhir.com/admin-api/infra/file/18/get/bg1.png" mode="scaleToFill"></image>
						</view>
					</view>
				</view>
				<view class="tit pd30">
					{{info.name}}
				</view>
			</view>
		</view>
		<view class="flex1">
			<scroll-view scroll-y="true" class="scrollView pt30">
				<view class="pd30">
					<view class="desc" v-html="info.description"></view>
					<view class="testList" v-if="info.questionList&&info.questionList.length>0">
						<view class="item" v-for="i in info.questionList">
							<view class="img">
								<image :src="i.picUrl" mode="aspectFill"></image>
							</view>
							<view class="txt">
								<view class="it">
									{{i.name}}
								</view>
								<view class="ip" v-html="i.description">
								</view>
								<view class="btns">
									<view class="btn" v-if="i.isFinish">
										测评完成
									</view>
									<view class="btn on" v-else @tap="openTest(i.id)">
										开始测评
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				itemid:'',
				info: {}
			}
		},
		methods: {
			getInfo() {
				var that = this;
				if(that.itemid){
					
					
					that.$api.evaluationtaskInfo({id:that.itemid}, res => {
						if (res.code == 200) {
							that.info = res.data
						}
					})
					
				}
			},
			openTest(id){
				uni.navigateTo({
					url:`/subpage/test/projectDetail?id=${id}&evaluationId=${this.itemid}`
				})
			}
		},
		onLoad(e) {
			this.itemid=e.id
			this.getInfo();
			
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background: #fff;
	}
	.infoHead{
		padding: 10rpx 0;
		.date{
			display: flex;
			justify-content: flex-start;
			.d{
				flex: 0 0 auto;
				position: relative;
				line-height: 50rpx;
				color: #fff;
				font-size: 24rpx;
				z-index: 5;
				.bg{
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
					z-index: -1;
					image{
						width: 100%;
						height: 100%;
						display: block;
					}
				}
			}
		}
		.tit{
			margin-top: 20rpx;
			font-size: 48rpx;
			font-weight: bold;
			color: #65554d;
		}
	}
	.desc{
		padding: 0 24rpx;
		border-left: 4rpx solid #fe9c29;
		font-size: 28rpx;
		line-height: 1.5;
		color: #897f7a;
		margin-bottom: 50rpx;
	}
</style>